import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Left from '@/components/Left'
import Params from '@/components/Params'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    // 单页面多路由的配置
    // {
    //   path: '/',
    //   name: 'Hello',
    //   components: {
    //     default: Hello,
    //     left: Left,
    //     right: Right
    //   }
    // },
    // {
    //   path: '/a',
    //   name: 'Hello',
    //   components: {
    //     default: Hello,
    //     left: Right,
    //     right: Left
    //   }
    // }

    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/params/:newsId/:newsTitle',
      component: Params,
      // 在路由中只能写进入之前的钩子函数. 在模板中可以写进入之前和离开之前的钩子函数
      beforeEnter: (to, from, next) => {
        console.log(to)
        console.log(from)
        //这里需要使用next(),或者next(true)来让请求继续向下执行
        //使用next(false),或者不写next()方法.请求将不会执行
        //可以使用next({path:'/'}); 来做页面的跳转,不执行路由的跳转
        next();
      }
    },
    {
      path: '/goHome',
      redirect: '/'
    },
    {
      //在路径中使用正则表达式来验证newsId的值必须为数字
      path: '/goParams/:newsId(\\d+)/:newsTitle',
      redirect: '/params/:newsId/:newsTitle'
    },
    {
      path: '/left',
      component: Left,
      // 使用别名
      alias: '/superbone'
    },
    {
      // 这里是全局的重定向.前面没有匹配的所有路径都会跳转到"/"
      path: '/*',
      redirect: '/'
    }
  ]
})
